<template>
  <div class="csinfo">
    <div class="csuser" v-clickout @clickout="dropdown = false">
        <div class="csuser_info" @click="openUserMenu">
          <div class="headpic" :type="csuser.type">
            <img :src="csuser.header_url ? $store.state.Config.web_url + csuser.header_url : defaultpic" draggable="false" />
            <!-- <Icons v-if="csuser.type === 1" color="green" name="zhengque" />
            <Icons v-else-if="csuser.type === 2" color="#ffd700" name="jinggao" />
            <Icons v-else-if="csuser.type === 3" color="red" name="cuowu" /> -->
          </div>
          <div class="user_name">
            <p><b>{{csuser.nickname}}</b></p>
            <!-- <p>{{csuser.username}}</p> -->
          </div>
          <Icon class="right_icon" :class="{active: csuser.dropdown}" type="md-arrow-dropdown" />
          <div class="dropdown" :class="{active:dropdown}">
            <div class="item">
              <p>账号：{{csuser.username}}</p>
            </div>
            <div class="hr"></div>
            <div class="item" @click="setUsetType(1)">
              <Icons class="icon" color="#61bd1b" name="zhengque"/>
              我在线上
            </div>
            <div class="item" @click="setUsetType(3)">
              <Icons class="icon icon1" color="#abb3b9" name="lishi"/>
              离线
            </div>
            <div class="hr"></div>
            <div class="item" @click="openAllSound">
              <Icons v-if="!config.notifi_sound" class="icon" color="#333" name="gou"/>
              <p>关闭所有声音</p></div>
            <div class="item" @click="openMassbox"><p>群发消息</p></div>
            <div class="item" @click="openHelpPage"><p>问题反馈</p></div>
          </div>
        </div>
          <!-- <div class="info">
            <h2>{{csuser.nickname}}</h2>
            <span>账号: {{csuser.username}}</span>
          </div>
          <CellGroup>
            <Cell title="我在线上" @click.native="setUsetType(1)" :selected="csuser.type === 1"><Icons slot="extra" color="green" name="zhengque" /></Cell>
            <Cell title="忙碌" @click.native="setUsetType(2)" :selected="csuser.type === 2"><Icons slot="extra" color="#ffd700" name="jinggao" /></Cell>
            <Cell title="离线" @click.native="setUsetType(3)" :selected="csuser.type === 3"><Icons slot="extra" color="red" name="cuowu" /></Cell>
            <Divider />
            <Cell title="消息群发" @click.native="openMassbox"><Icon slot="extra" type="md-contacts" /></Cell>
            <Cell title="问题反馈" @click.native="openHelpPage"><Icon slot="extra" type="md-bug" /></Cell>
          </CellGroup> -->
    </div>
  </div>
</template>

<script>
  export default {
    name: 'csuserInfo',
    data () {
      return {
        defaultpic: require('../../assets/images/timg.jpg'),
        dropdown: false,
        config: {}
      }
    },
    props: {
      csuser: {
        default: function () {
          return {}
        }
      }
    },
    created () {
    },
    methods: {
      // 打开下来窗口
      async openUserMenu () {
        var config = await this.$db.config.getConfig()
        this.config = config
        console.log(this.config)
        this.dropdown = !this.dropdown
      },
      // 设置用户状态
      setUsetType (type) {
        this.$listeners['setUsetType'](type)
        setTimeout(() => {
          this.dropdown = false
        }, 200)
      },
      // 打开帮助页面
      openHelpPage () {
        this.$electron.shell.openExternal('https://wj.qq.com/s/2848388/5a66/')
        setTimeout(() => {
          this.dropdown = false
        }, 200)
      },
      // 打开离线消息窗口
      openMassbox () {
        this.$emit('openMassbox')
        setTimeout(() => {
          this.dropdown = false
        }, 200)
      },
      // 关闭所有声音
      async openAllSound () {
        this.config.notifi_sound = !this.config.notifi_sound
        try {
          var result = await this.$db.config.setConfig(this.config)
          if (result.status === 1) {
            this.$Message.success('保存成功')
          } else {
            this.$Message.error('保存配置失败，请重试！')
          }
        } catch (e) {
          console.log(e.message)
          this.$Message.error('保存配置失败，请重试！')
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import './style.less';
</style>
